<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>method实现姓名案例</title>
  <div id='root'>
      <!-- 
          1.计算属性不能实现异步计算,此时需要使用监听
          2.所有不被vue管理的函数(定时,ajax,promise回调函数)最好写成箭头函数,这样this的指向才是vm
        -->
      <h2>今天天气很 {{ wather }}</h2>
      <button @click = "isSunny = !isSunny" >切换天气</button>
  </div>
</head>
<body>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
   // 设置为 false 以阻止 vue 在启动时生成生产提示。
   Vue.config.productionTip = false
  // 创建一个vue实例
  const vm = new Vue({
    // el -> element 用于指定当前vue对象绑定哪个容器,值通常为css选择器字符串
    el: '#root',
    // data 用于存储数组,数据供el所指定的容器去使用 
    data: {
      isSunny: true
    }, 
    computed:{
      wather() {
        return this.isSunny == true ? '晴朗' : '一般';
      }
    },
    watch: {
   /*    isSunny: {
        // 初始化
        immediate: true,
        // 深度监听
        deep: true, 
       
        handler(newValue, oldValue) {
          console.log(newValue, oldValue);
        } 
      } */
      // 不需要配置属性时可以简写
      /*   isSunny(newValue, oldValue) {
        console.log(newValue, oldValue);
      } */
    }
  });
  /* 正常写法 */
/*   vm.$watch('isSunny',{
          // 初始化
          immediate: true,
    handler(newValue, oldValue) {
          console.log(newValue, oldValue);
        } 
  }) */
  /* 简写 vue回调函数不能使用this,会使this指向改变 */
  vm.$watch('isSunny',function(newValue, oldValue) {
    console.log(newValue, oldValue);
  })
</script>
</body>
</html>